<template>
<h2>deom07-show01</h2>
  <div class="zhtt-demo-card">
    <div class="zhtt-demo-card-header">v-show</div>
    <div  class="zhtt-demo-card-body">
      <h2 v-show="condition01">这是v-show中的内容</h2>
      <button class="zhtt-btn" @click="changeCondition01">切换变量布尔值</button>
    </div>
    <div class="zhtt-demo-card-footer">
      v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 display CSS property。<br/>
      注意，v-show 不支持 &lt;template&gt; 元素，也不支持 v-else
    </div>
  </div>
</template>

<script>
export default {
  name: "deom07-show01",
  data(){
    return {
      condition01:true,
      type:'A'
    }
  },
  methods:{
    changeCondition01(){
      this.condition01 = !this.condition01;
    },
    changeType(){
      let num = Math.random();
      this.type = num>0.7?'A':num>0.4?'B':num>0.1?'C':'D';
    }
  }
}
</script>

<style scoped>

</style>